<template>
    <div>
        <div style="text-align: left;clear: both;">
            <div v-for="(item,index) in moduleList" :key="index" class="module" @click="selectModule(item.id,item.name)" :style="item.id === moduleId?'background-color:#8AA4F8;color:white;':''">
                <div class="module-index" :style="item.id === moduleId?'color: #706f6f;':''">{{ index+1 }}</div>
                <div class="module-name" :style="item.id === moduleId?'color: white;':''">{{ item.name }}</div>
            </div>
        </div>
        <div style="clear: both;text-align: right;">
            <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange"></el-pagination>
        </div>
        <el-divider>当前选择模块：{{ moduleName.length > 0? moduleName:'空' }}</el-divider>
        <div style="background-color: #FCFCFC;border: 2px #a09f9f solid;margin-top: 20px;margin-bottom: 100px;border-radius: 10px;">
            <div style="text-align: left;font-size: large;margin: 20px;"><i class="el-icon-edit"></i> 发表新话题</div>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">标题</el-col>
                <el-col :span="22"><el-input v-model="question.title"></el-input></el-col>
            </el-row>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">内容</el-col>
                <el-col :span="22"><textarea style="width: 99%;height: 200px;border:1px #DCDFE6 solid;border-radius: 4px;" v-model="question.content"></textarea></el-col>
            </el-row>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">图片</el-col>
                <el-col :span="22" :offset="2" style="text-align: left;">
                    <el-upload
                        action="http://120.26.2.5:15400/upload/file"
                        :limit="9"
                        list-type="picture-card"
                        :file-list="imgList"
                        :on-remove="removeImage"
                        :on-success="uploadImage">
                        <el-button type="success" icon="el-icon-picture-outline" circle></el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-row style="line-height: 40px;margin: 20px;">
                <el-col :span="2">视频</el-col>
                <el-col :span="22" :offset="2" style="text-align: left;">
                    <el-upload
                        action="http://120.26.2.5:15400/upload/file"
                        :limit="1"
                        list-type="text"
                        :file-list="videoList"
                        :on-remove="removeVideo"
                        :on-success="uploadVideo">
                        <el-button type="danger" icon="el-icon-video-camera">上传视频</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <div style="margin: 30px;"><el-button style="width: 80%;background-color: #BDCEFC;color: white;border-radius: 20px;border: none;" type="primary" @click="submitQuestion">提交</el-button></div>
        </div>
    </div>
</template>

<script>
import { listModule,addQuestion } from '@/api/api'
export default {
    data(){
        return {
            userId: 0,
            userImg: '',
            userGender: '',
            userName: '',
            userPhone: '',
            userBirthday: '',
            userType: '',
            moduleId: 0,
            moduleName: '',
            moduleList: [],
            current: 1,
            size: 12,
            total: 0,
            question:{
                content: '',
                img: '',
                mid: 0,
                title: '',
                uid: 0,
                video: ''
            },
            imgList:[],
            videoList: []
        }
    },
    mounted() {
        const that = this
        that.imgUrl = that.$store.state.imgUrl
        that.getUserMessage()
        that.getModuleList()
    },
    methods:{
        getUserMessage:function(){
            const that = this
            that.userId = localStorage.getItem('userId')
            that.userImg = localStorage.getItem('userImg')
            that.userGender = localStorage.getItem('userGender')
            that.userName = localStorage.getItem('userName')
            that.userPhone = localStorage.getItem('userPhone')
            that.userBirthday = localStorage.getItem('userBirthday')
            that.userType = localStorage.getItem('userType')
        },
        getModuleList:function(){
            const that = this
            listModule({
                name: '',
                current: that.current,
                size: that.size
            }).then(res => {
                that.total = res.data.total
                that.moduleList = res.data.records
            })
        },
        currentChange:function(current){
            const that = this
            that.current = current
            that.getModuleList()
        },
        selectModule:function(id,name){
            const that = this
            that.moduleId = id
            that.moduleName = name
        },
        uploadImage:function(response, file, fileList){
            const that = this
            that.question.img = ''
            if(fileList.length > 0){
                fileList.forEach(item => {
                    that.question.img += (item.response + ',')
                })
            }
            that.question.img = that.question.img.substring(0,that.question.img.length - 1)
        },
        removeImage:function(file, fileList){
            const that = this
            that.question.img = ''
            if(fileList.length > 0){
                fileList.forEach(item => {
                    that.question.img += (item.response + ',')
                })
            }
            that.question.img = that.question.img.substring(0,that.question.img.length - 1)
        },
        uploadVideo:function(response, file, fileList){
            const that = this
            if(fileList.length > 0){
                that.question.video = fileList[0].response
            }else{
                that.question.video = ''
            }
        },
        removeVideo:function(file, fileList){
            const that = this
            if(fileList.length > 0){
                that.question.video = fileList[0].response
            }else{
                that.question.video = ''
            }
        },
        submitQuestion:function(){
            const that = this
            if(that.moduleId == 0 || that.moduleName.length <= 0){
                that.$message({
                    message: '请选择您要提交的模块！',
                    type: 'warning'
                })
                return
            }
            if(that.question.title.length <= 0 || that.question.content.length <= 0){
                that.$message({
                    message: '标题或内容为空！',
                    type: 'warning'
                })
                return
            }
            that.question.mid = that.moduleId
            if(localStorage.getItem('userId') == null){
                that.$message({
                    message:'您还未登录！',
                    type: 'warning'
                })
                return
            }
            that.question.uid = localStorage.getItem('userId')
            addQuestion(that.question).then(res => {
                if(res.status === 200){
                    that.$message({
                        message: '提交成功',
                        type: 'success'
                    })
                    that.question = {
                        content: '',
                        img: '',
                        mid: 0,
                        title: '',
                        uid: 0,
                        video: ''
                    }
                    that.imgList = []
                    that.videoList = []
                }else{
                    that.$message({
                        message: '提交出错',
                        type: 'error'
                    })
                }
            })
        }
    }
}
</script>